var tp = '15%'
var leg1 = 15
var rt = '3%'
var lf = '10%'
if (window.screen.width < 1441) {
	tp = '25%'
	leg1 = 5
	rt = '0%'
}
if (window.screen.width < 1401) {
	lf = '5%'
	rt = '0%'
}

function echart1(edata) {
	var myChart1 = echarts.init(document.getElementById('echart1'));
	option1 = {
		tooltip: {
			trigger: 'item',
			formatter: '{a} <br/>{b} : {c} ({d}%)'
		},
		legend: {
			orient: 'vertical',
			data: edata['names'],
			textStyle: {
				color: '#69b8ff',
				fontSize: 16,
				padding: [0, 0, 0, 5]
			},
			right: rt,
			top: '35%',
			itemGap: 8,
			itemWidth: 14,
			itemHeight: 14
		},
		color: ['#1165b2', '#0d8888', '#70980c', '#af620f'],
		series: [{
			name: '分类占比',
			type: 'pie',
			radius: [10, 70],
			center: ['35%', '50%'],
			roseType: 'area',
			labelLine: {
				normal: {
					length: leg1,
					length2: 50,
					lineStyle: {
						color: '#b4e4ff'
					}
				}

			},
			label: {
				normal: {
					formatter: '{b|{b}}\n{per|{d}%} ',
					align: 'center',
					fontSize: 12,
					fontFamily: '黑体',
					padding: [0, -50],
					height: 40,
					lineHeight: 20,
					rich: {
						per: {
							fontSize: 12,
							align: 'center',
							color: "#b4e4ff"
						}
					},
					textStyle: {
						fontSize: 12,
						color: "#b4e4ff"
					},
				}
			},
			data: edata['all']
		}]
	};
	myChart1.setOption(option1);
}

function echart2(edata) {
	var myChart2 = echarts.init(document.getElementById('echart2'));
	option2 = {
        legend: {
        	data:edata['areas'],
        	textStyle: {
        		color: '#69b8ff',
        		fontSize: 16
        	},
        	right: '3%',
        	top: '20%',
        	itemGap: 3,
        	itemWidth: 14,
        	itemHeight: 14
        },
        tooltip: {
            trigger: 'axis',
            // showContent: false
        },
        xAxis: {
			type: 'category',
			data: edata['names'],
			axisLine: {
				show: true,
				labelLine: false,
				lineStyle: {
					color: '#4197cd',
					width: 1, //这里是坐标轴的宽度,可以去掉
				}
			},
			axisLabel: { //  如果这个字段不设置，echarts会根据屏宽及横坐标数据自动给出间隔
			   interval: 0, // 间隔长度，可自定义（如果是时间格式，echarts会自动处理）
			   rotate: 30 // 横坐标上label的倾斜度
			},
		},
        yAxis: {
			splitLine: {
				show: false
			},
			axisLine: {
				show: true,
				labelLine: false,
				lineStyle: {
					color: '#b1eeff',
					width: 1, //这里是坐标轴的宽度,可以去掉
				}
			}
		},
        grid: {
			top: '35%',
			bottom:'20%',
			left:'8%',
			right:'3%'
		},
		color: ['#00d8ff', '#ab181f', '#af3b14', '#398912'],
        series: [
            {
				name:edata['areas'][0],
				type: 'line', 
				smooth: true, 
				seriesLayoutBy: 'row',
				showSymbol: false,
				data: edata['data'][0]
			},
            {
				name:edata['areas'][1],
				type: 'line', 
				smooth: true, 
				seriesLayoutBy: 'row',
				showSymbol: false,
				data:  edata['data'][1]
			},
            {
				name:edata['areas'][2],
				type: 'line', 
				smooth: true, 
				seriesLayoutBy: 'row',
				showSymbol: false,
				data: edata['data'][2]
			},
            {
				name:edata['areas'][3],
				type: 'line', 
				smooth: true, 
				seriesLayoutBy: 'row',
				showSymbol: false,
				data: edata['data'][3]
			},
            
        ]
    };
	myChart2.setOption(option2);
}

function echart3(edata) {
	var myChart3 = echarts.init(document.getElementById('echart3'));
	option3 = {
		tooltip: {
		    trigger: 'axis',
		    formatter: '{b} : {c}',
			axisPointer: {
				type: 'none'
			
			}
		},
		grid: {
			top: '10%',
			bottom:'6%',
			left:'15%',
			right:'5%'
		},
		xAxis: {
			name: '',
			splitLine: {
				show: false
			},
			axisLine: {
				show: true,
				labelLine: false,
				lineStyle: {
					color: '#4197cd',
					width: 1, //这里是坐标轴的宽度,可以去掉
				}
			},
		},
		yAxis: {
			type: 'category',
			data: edata['names'],
			splitLine: {
				show: false
			},
			axisLine: {
				show: true,
				labelLine: false,
				lineStyle: {
					color:'#88c3ff',
					width: 1, //这里是坐标轴的宽度,可以去掉
				}
			},
			splitArea: {
				show: true,
				areaStyle: {
					color: ['rgba(27,118,211,0.2)', 'rgba(27,118,211,0.1)']
				}
			}
		},
		visualMap: {
			y: -1000,
			splitList: [
				{
					start: 0, 
					end: edata['names'].length-4, 
					label: '',
					color: new echarts.graphic.LinearGradient(
						1, 0, 0, 0,
						[
							{offset: 0, color: '#10a4bb'},
							{offset: 1, color: '#18398e'}
						]
					)
				},
				{
					start: edata['names'].length-3, 
					end: 50000, 
					label: '', 
					color: new echarts.graphic.LinearGradient(
						1, 0, 0, 0,
						[
							{offset: 0, color: '#ff6614'},
							{offset: 1, color: '#8e2918'}
						]
					)
				}
			]
		},
		series: [
			{
				type: 'bar',
				barWidth :20,
				encode: {
					// Map the "amount" column to X axis.
					x: 'amount',
					// Map the "product" column to Y axis
					y: 'product'
				},
				data: edata['num3']
			}
		]
	};

	myChart3.setOption(option3);
}